<!-- <nz-card style="width: 300px;" nzSize="small"> -->
<nz-card-meta
  [nzTitle]="research.name"
  [nzDescription]="research.description"
  [nzAvatar]="avatarTemplate"
></nz-card-meta>

<ul class="list-unstyled">
  <li *ngIf="research.requiredChallenge">
    <i
      nz-icon
      class="bottom-icon"
      [nzType]="
        research.requiredChallenge.challenge.quantity.gte(
          research.requiredChallenge.level
        )
          ? 'check'
          : 'stop'
      "
      [ngClass]="
        research.requiredChallenge.challenge.quantity.gte(
          research.requiredChallenge.level
        )
          ? 'text-success'
          : 'text-danger'
      "
    ></i>
    <span class="text-secondary"> Require challenge: </span
    >{{ research.requiredChallenge.challenge.name }}
    <span class="text-secondary"> lv.</span>
    <span class="monospace">{{ research.requiredChallenge.level }}</span>
  </li>
  <li *ngIf="research.requiredCard">
    <i
      nz-icon
      class="bottom-icon"
      [nzType]="research.requiredCard.active ? 'check' : 'stop'"
      [ngClass]="research.requiredCard.active ? 'text-success' : 'text-danger'"
    >
    </i>
    <span class="text-secondary"> Require Card: </span
    >{{ research.requiredCard.name }}
  </li>
  <li *ngFor="let unit of research.unitsToUnlock; trackBy: getId">
    <span class="text-secondary">Unlock unit:</span> {{ unit.name }}
  </li>
  <li *ngFor="let res of research.researchToUnlock; trackBy: getId">
    <span class="text-secondary">Unlock research:</span> {{ res.name }}
  </li>
  <li *ngFor="let tech of research.technologiesToUnlock; trackBy: getId">
    <span class="text-secondary">Unlock technology:</span> {{ tech.name }}
  </li>
  <li *ngFor="let mod of research.modulesToUnlock; trackBy: getId">
    <span class="text-secondary">Unlock ship module:</span> {{ mod.name }}
  </li>
  <li *ngFor="let unit of research.modPoints">
    +{{ unit.multi | percent }} {{ unit.unit.name
    }}<span class="text-secondary"> mod points</span>
  </li>
  <li *ngFor="let unit of research.buildingPoints">
    +{{ unit.quantity | number }} {{ unit.building.name
    }}<span class="text-secondary"> departments</span>
  </li>
  <li *ngFor="let effMulti of research.effMulti; trackBy: getId">
    {{ effMulti.unit.name }}
    <span class="text-secondary"> yields </span>
    <span class="monospace">{{ effMulti.multi | percent }}</span>
    <span class="text-secondary"> more </span>
    <span class="text-secondary" *ngIf="effMulti.secondUnit"> per </span>
    {{ effMulti.secondUnit?.name }}
  </li>
  <li *ngFor="let prodMulti of research.prodMulti; trackBy: getId">
    {{ prodMulti.unit.name }}
    <span class="text-secondary"> yields and consume </span>
    <span class="monospace">{{ prodMulti.multi | percent }}</span>
    <span class="text-secondary"> more </span>
    <span class="text-secondary" *ngIf="prodMulti.secondUnit"> per </span>
    {{ prodMulti.secondUnit?.name }}
  </li>
  <li *ngFor="let techMulti of research.technologyBonus; trackBy: getId">
    <span class="text-secondary"> +</span
    ><span class="monospace">{{ techMulti.multi | percent }} </span>
    {{ techMulti.technology.name }}
    <span class="text-secondary"> technology progress </span>
  </li>
  <li *ngIf="research.districtMultiplier">
    +{{ research.districtMultiplier | percent }} districts
    <span class="text-secondary"> from enemies </span>
  </li>
  <li *ngIf="research.habSpaceMulti">
    +{{ research.habSpaceMulti | percent }} habitable space
    <span class="text-secondary"> from enemies </span>
  </li>
  <li *ngIf="research.miningDistMulti">
    +{{ research.miningDistMulti | percent }} mining districts
    <span class="text-secondary"> from enemies </span>
  </li>
  <li *ngIf="research.energyDistMulti">
    +{{ research.energyDistMulti | percent }} energetic districts
    <span class="text-secondary"> from enemies </span>
  </li>
  <li *ngIf="research.commonCivilianBonus">
    +{{ research.commonCivilianBonus | percent }} civilian engineering build
    speed
  </li>
  <li *ngIf="research.spaceStationBuildBonus">
    +{{ research.spaceStationBuildBonus | percent }} space stations build speed
  </li>
  <li *ngFor="let hsbBonus of research.spaceStationsToUp">
    <span class="text-secondary">{{ hsbBonus.spaceStation.name }}</span> +
    {{ hsbBonus.multi | percent }} habitable space
  </li>
  <li *ngFor="let hsbBonus of research.infrastructureToUp">
    <span class="text-secondary">{{ hsbBonus.infrastructure.name }}</span> +
    {{ hsbBonus.bonus | percent }} speed and acceleration bonus
  </li>
  <li *ngFor="let battleMulti of research.battleMulti">
    +{{ battleMulti.multi | percent }}
    {{ battleMulti.material.name }}
    <span class="text-secondary">from enemies</span>
  </li>
  <li *ngIf="research.materialMulti">
    +{{ research.materialMulti | percent }}
    Materials
    <span class="text-secondary">from enemies</span>
  </li>
  <li *ngIf="research.scienceMulti">
    +{{ research.scienceMulti | percent }}
    Science and Search
    <span class="text-secondary">from enemies</span>
  </li>
  <li *ngIf="research.shipProductionBonusAll">
    +{{ research.shipProductionBonusAll | percent }}
    <span class="text-secondary">production of</span> all ships
  </li>
  <li *ngFor="let shipProdMulti of research.shipProductionBonus">
    +{{ shipProdMulti.multi | percent }}
    {{ shipProdMulti.shipType.name }}
    <span class="text-secondary">production speed</span>
  </li>
  <li *ngIf="research.fleetCapacity > 0">
    + {{ research.fleetCapacity | format: true }} fleet capacity
  </li>
  <li *ngIf="research.navalCapacity > 0">
    + {{ research.navalCapacity | format: true }} naval capacity
  </li>
  <li *ngFor="let lim of research.limitMulti">
    +{{ lim.multi | percent }} {{ lim.unit.name }}
    <span class="text-secondary">storage</span>
    <span *ngIf="lim.second">
      <span class="text-secondary"> per </span> {{ lim.second.name }}
    </span>
  </li>
  <li *ngIf="research.recycling > 0">
    + {{ research.recycling | format }} recycling
  </li>
  <li *ngIf="research.speedMulti > 0">
    +{{ research.speedMulti | percent }}
    <span class="text-secondary">ship</span> velocity
    <span class="text-secondary">and</span>
    acceleration
  </li>
  <li *ngIf="research.accelerationMulti > 0">
    +{{ research.accelerationMulti | percent }}
    <span class="text-secondary">ship</span> acceleration
  </li>
  <li *ngIf="research.spellToUnlock">
    <i
      nz-icon
      class="bottom-icon"
      [nzType]="research.spellToUnlock.icon"
      [ngClass]="research.spellToUnlock.colorClass"
    ></i>
    <span>{{ research.spellToUnlock.name }}</span>
  </li>
  <li *ngIf="research.computingPerSec > 0">
    +{{ research.computingPerSec | format: true }} computing /s
  </li>
</ul>
<ul class="list-unstyled">
  <li>
    <i
      nz-icon
      class="bottom-icon"
      [nzType]="ms.game.resourceManager.science.icon"
      [ngClass]="ms.game.resourceManager.science.colorClass"
    ></i>
    <span class="monospace">
      {{ research.progress | format }}/{{ research.total | format }}
      {{ research.progressPercent }}%</span
    >
  </li>
  <li *ngIf="research.inspirationDescription">
    <i
      nz-icon
      [ngClass]="ms.game.resourceManager.science.colorClass"
      class="bottom-icon"
      nzType="rise"
      nzTheme="outline"
    ></i>
    <i
      nz-icon
      *ngIf="research.inspiration"
      nzType="check"
      nzTheme="outline"
      class="text-success bottom-icon"
    ></i>
    <span> {{ research.inspirationDescription }} </span>
  </li>
</ul>

<span
  *ngIf="!noProgress"
  class="monospace"
  fxLayout="row"
  fxLayout.xs="column"
  fxLayoutAlign="space-between"
>
  <span>
    <i nz-icon nzType="clock-circle" nzTheme="outline" class="space"></i>
    <span> {{ research.timeToEnd | time }}</span>
  </span>
  <span class="text-secondary">
    {{ research.progress | format }}/{{ research.total | format }}
    {{ research.progressPercent }}%</span
  >
</span>
<app-progress
  *ngIf="!noProgress"
  [progress]="research.progressPercent"
></app-progress>
<!-- </nz-card> -->

<ng-template #avatarTemplate>
  <i
    nz-icon
    [nzType]="research.type.icon"
    [style.color]="research.type.color"
  ></i>
</ng-template>
